<template>
  <div class="vk-VCode">
    <canvas
      id="canvas"
      class="vk-VCode-canvas"
      height="600"
      width="600"
    ></canvas>
  </div>
</template>

<script>
export default {
  name: "VkVCode",
  data() {
    return {};
  },

  mounted() {
    // this.drawLines();
    this.drawTriangle();
  },
  methods: {
    // 绘制平行线
    drawLines() {
      // 获取画布
      var canvas = document.getElementById("canvas");
      // 获取画笔，选择2d模式
      var ctx = canvas.getContext("2d");
      // 绘制第1条线
      // 把笔尖移动到位置
      ctx.moveTo(0, 100);
      // 以线的形式移动到位置，如果只执行这一步是看不到线的，他仅仅是移动的轨迹，并没有画上去
      ctx.lineTo(200, 100);
      // 设置线宽,不需要单位,如果不写线的颜色默认是黑色，1px宽，会产生绘制线颜色和宽度的问题
      ctx.lineWidth = 2;
      // 设置线的颜色
      ctx.strokeStyle = "red";
      // 对走过的轨迹描边，此时才会对走过的轨迹进行绘制，才能在页面上看到
      ctx.stroke(); // 对于线叫描边，对于面叫填充

      // 重置绘制的起点
      ctx.beginPath();

      // 绘制第2条线
      ctx.moveTo(100, 150);
      ctx.lineTo(300, 150);
      ctx.lineWidth = 6;
      ctx.strokeStyle = "yellow";
      ctx.stroke();
    },

    // 绘制三角形
    drawTriangle() {
      let canvas = document.getElementById("canvas");
      let ctx = canvas.getContext("2d");
      ctx.moveTo(10, 10);
      ctx.lineTo(300, 10);
      ctx.lineTo(360, 360);
      ctx.lineWidth = 6;
      ctx.closePath(); // 自动闭合
      ctx.stroke();
    },
  },
};
</script>

<style scoped></style>
